// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from "path";
import { buildVitePlugin } from "./scripts/vite-plugin-build";
import type { PluginOption } from "vite";

function _resolve(dir: string) {
  return resolve(__dirname, dir);
}

// process.env.NODE_ENV 是nuxt3默认就有的变量
const isProduction = process.env.NODE_ENV === "production";
const isDevelopment = process.env.NODE_ENV === "development";

console.log("运行环境", process.env.NODE_ENV);

const basePath = process.env.BASE_PATH;
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  modules: [
    "@pinia/nuxt",
    "@nuxtjs/tailwindcss",
    "nuxt-swiper",
    "@nuxt/image",
    "nuxt-icons",
    "@vant/nuxt",
  ],
  runtimeConfig: {
    public: {
      /* 
       process.env.BASE_PATH 这句代码是读取 .env 文件中配置的变量。
       
       在vue文件中通过如下方式访问
       const config = useRuntimeConfig();
       const { BASE_PATH } = config.public;
       */
      BASE_PATH: process.env.BASE_PATH,
    },
  },
  css: ["~/assets/scss/comm.scss"],
  vant: {
    lazyload: {
      lazyComponent: true,
    },
  },
  pinia: {
    storesDirs: ["./stores/**"],
  },
  tailwindcss: {
    cssPath: ["~/assets/css/tailwind.css", { injectPosition: "first" }],
    configPath: "tailwind.config",
    exposeConfig: false,
    exposeLevel: 2,
    viewer: true,
  },
  image: {},
  swiper: {
    // Swiper options
    //----------------------
    // prefix: 'Swiper',
    // styleLang: 'css',
    // modules: ['navigation', 'pagination'], // all modules are imported by default
  },
  app: {
    // 如果发布到非根目录需要配置baseURL, 发布到根目录则删除baseURL配置
    baseURL: `/${basePath}/`,
    // pageTransition: { name: "page", mode: "out-in" },
    head: {
      title: "nuxt3 实例",
      htmlAttrs: {
        lang: "zh-CN",
      },
      script: [
        {
          /*
          解决低版本浏览器报错(错误来自 swiperjs): Uncaught ReferenceError: System is not defined

          代码复制自 node_modules/systemjs
           */
          src: `/${basePath}/system.min.js`,
        },
        {
          /*
          解决低版本浏览器报错: Uncaught ReferenceError: globalThis is not defined

          代码复制自 node_modules/@ungap/global-this
           */
          src: `/${basePath}/globalthis.min.js`,
        },
      ],
    },
  },
  postcss: {
    plugins: {
      // 让 CSS 编写更符合模块化思想，它允许在 CSS 文件中使用 @import 语句来导入其他 CSS 文件
      "postcss-import": {},
      // 允许你在 CSS 中使用类似 Sass 或 Less 那样的嵌套选择器规则
      "tailwindcss/nesting": "postcss-nesting",
      tailwindcss: {},
      /*
        postcss-preset-env作用: 打包时自动给css加特定浏览器前缀的代码。浏览器版本配置在package.json的browserslist中
         */
      "postcss-preset-env": {
        features: { "nesting-rules": false },
      },
      /*
        cssnano作用:将css进行打包优化，能够减小打包后的css体积
        (如何看是否有效: 去掉这个配置，打包一次截图css的体积，加上这个配置再打包一次，
          对比两次打包后css的体积变化，会发现加了这个配置体积会小一点). 
          官网: https://www.cssnano.cn/docs/what-are-optimisations/
  
          cssDeclarationSorter设置为false是禁止cssnano再对属性结果重新排序. 因为stylelint已经排好序了
         */
      cssnano: {
        preset: ["default", { cssDeclarationSorter: false }],
      },
      // 'postcss-px-to-viewport-8-plugin': {
      //   unitToConvert: 'px', // 要转化的单位
      //   viewportWidth: 1920, // UI设计稿的宽度
      //   unitPrecision: 6, // 转换后的精度，即小数点位数
      //   propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      //   viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      //   fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      //   selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
      //   minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      //   mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
      //   replace: true, // 是否转换后直接更换属性值
      //   exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      //   landscape: false, // 是否处理横屏情况
      // },
    },
  },
  vite: {
    esbuild: {
      drop: isProduction ? ["debugger"] : [],
      pure: isProduction
        ? [
            "console.log",
            "console.error",
            "console.warn",
            "console.debug",
            "console.trace",
          ]
        : [],
    },
    plugins: buildVitePlugin(),
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/_var.scss" as *;',
        },
      },
    },
    resolve: {
      alias: {
        "~components": _resolve("components"),
        "~utils": _resolve("utils"),
      },
    },
  },
});
